<template>
    <div>
        <el-row :gutter="80">
            <el-col :span="4">学生信息字段</el-col>
            <el-col :span="4">
                <div class="empty-box common-height"></div>
            </el-col>
            <el-col :span="4">自定义字段</el-col>
            <el-col :span="4">
                <div class="empty-box common-height"></div>
            </el-col>
            <el-col :span="6">排序</el-col>
            <el-col :span="2">
                <div class="empty-box common-height"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20" v-for="(field, index) in fields" :key="index">
            <el-col :span="4">
                <el-input v-model="field.field"/>
            </el-col>
            <el-col :span="4">
                <div class="empty-box common-height"></div>
            </el-col>
            <el-col :span="4">
                <el-input v-model="field.customField"/>
            </el-col>
            <el-col :span="4">
                <div class="empty-box common-height"></div>
            </el-col>
            <el-col :span="4">
                <el-input v-model="field.sort"/>
            </el-col>
            <el-col :span="4">
                <el-button type="text" v-if="index > 0" @click="deleteField(index)">删除</el-button>
                <el-button
                    type="text"
                    @click="addField(index)"
                    v-if="index === fields.length - 1"
                >添加</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    props: {
        fields: {
            type: Array,
            required: true
        },
        tipFields: {
            type: Array,
            required: true
        }
    },
    data() {
        return {};
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {},
        deleteField(index) {
            this.$emit("deleteField", index);
        },
        addField(index) {
            this.$emit("addField", index);
        }
    }
};
</script>
<style>
.common-height {
    height: 40px;
}
</style>
